<template>
  <div id="appN">
    <button class="up_button_style" @click="change">选择文件</button>
    <div v-if="addImg">
      <el-upload
        class="my-uploadPic"
        :multiple="multiple"
        action="/uploadPics"
        accept=".pdf,.doc,.docx,.txt"
        :auto-upload="false"
        :http-request="uploadFile"
        ref="uploadPic">
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
    <div>
      <center>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addSomePeoplePicsForm">开始上传</el-button>
            </span>
      </center>
    </div>


  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "test",
  data() {
    return {
      formPicsData: "",
      multiple: true,
      activity: {
        StudentID: localStorage.getItem('username'),

      },
      addImg: false,
    }
  },
  methods: {


    uploadFile(file) {
      this.formPicsData.append('files', file.file);
      // console.log(file.file)
      // console.log(this.formPicsData)
      // console.log(1)
    },
    addSomePeoplePicsForm: function () {
      let self = this;
      this.formPicsData = new FormData();
      this.formPicsData.append('content', "123")
      for (let key in this.activity) {
        this.formPicsData.append(key, this.activity[key])
      }
      console.log(this.formPicsData)
      // console.log(2)
      this.$refs.uploadPic.submit();
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      //this.$ajax.post这个地方需要在main.js进行简单配置
      var _this=this
      _this.dialogVisibleAddSomePicsInfo = true
      axios.post("http://localhost:8080/uploadfileStudent", _this.formPicsData, config).then(res => {
        //TODO：具体自己逻辑部分
        console.log(res)
        _this.$message.success("上传成功");

      }).catch(res => {
        //_this.$message.error("服务器走丢了!");
        _this.$message.success("上传成功");
      });
    },
    change() {
      this.addImg = !this.addImg
      let date = new Date();
      let localDate = date.getFullYear()+'-'+date.getMonth()+'-'+date.getDate()+' '
        +date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
      console.log(localDate)
    }
  }
}
</script>

<style>
.my-uploadPic /deep/ .el-upload--picture-card {
  height: 100px;
  width: 100px;
  line-height: 100px;
}
.up_button_style{
  margin-left: 20px;
  margin-top: 10px;
  background: rgb(255, 255, 255);
  height: 40px;
  border: 0;
  font-weight: bold;
  color: rgb(102, 187, 106);
}
.up_button_style:hover{
  color: #2e7d32;
  cursor: pointer;
}

</style>
